<template>
  <div class="attend-wrap">
    <div class="search-box">
      <div class="note" @click="openNote">功能说明</div>
      <div class="search-con">
        <input type="text" placeholder="请输入姓名或者工号" class="content" v-model="check" @blur="inputBlur"/>
        <img src="./search.png" class="icon" onclick="return false"/>
      </div>
      <div class="title" @click="searchAttend()">搜索</div>
    </div>

    <div class="attend-con" ref="wrapper">
      <div class="attend">
        <div class="attend-list" v-for="(item,index) in attendList" :key="index" v-show="showAttend == 1">
          <div class="attend-box">
            <div class="attend-content">
              <span class="name">{{item.userName}}</span><span class="number status">{{item.status>0?"已签到":""}}</span>
            </div>
            <div class="attend-content">
              <span class="name">身份证号:</span><span class="number">{{item.userCardNumber}}</span>
              <div v-if="!item.workNum" class="sign-btn">
                <button type="button" class="off" v-if="item.status>0" @click="openModal(item.id)">取消签到</button>
                <button type="button" class="pass" v-else @click="attendance(item.id)">考勤签到</button>
              </div>
            </div>
            <div class="attend-content" v-if="item.workNum">
              <span class="name">工号:</span><span class="number">{{item.workNum}}</span>
              <button type="button" class="off" v-if="item.status>0" @click="openModal(item.id)">取消签到</button>
              <button type="button" class="pass" v-else @click="attendance(item.id)">考勤签到</button>
            </div>
          </div>
          <div class="line-box" v-if="index != attendList.length-1"></div>
        </div>
      </div>
    </div>


    <!--搜索无结果-->
    <div class="empty-wrap" v-show="showAttend == 2">
      <div class="empty-box">
        <div class="img-box"><img src="../../images/empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">没有相关记录!</div>
      </div>
    </div>

    <!--功能说明-->
    <div class="modal-wrap" v-show="rule">
      <div class="modal-box">
        <div class="modal-con">
          <div class="title-box">
            <span class="title">员工考勤功能说明</span>
            <img src="./del.png" class="del-icon" @click="close" onclick="return false"/>
          </div>
          <div class="rule-box">
            1.该功能主要用于驻厂老师管理能够提前领工资的员工的日常考勤。
          </div>
          <div class="rule-box">
            2.当驻厂老师确认某一员工上班后，点击“考勤签到”按钮，则该员工签到成功。若驻厂老师操作错误，点击“修改考勤”按钮，则可以取消该员工的考勤签到状态。
          </div>
        </div>
      </div>
    </div>

    <v-dialog v-model="sendVal" content="是否将该员工的考勤状态改成未签到？" cancelText="否" confirmText="是" @confirm="updateAttend"
              @cancel="cancel"></v-dialog>


  </div>
</template>

<script>
  import {baseUrl} from "../../common/js/env"
  import dialog from "../../components/dialog/dialog"
  import BScroll from 'better-scroll'
  import {getDeviceRatio} from "../../common/js/util"

  /*获取当前缩放比*/
  const DEVICE_RATIO = getDeviceRatio();
  /**
   *
   * @param threshold 触发事件的阀值，即滑动多少距离触发
   */
  /*上拉配置*/
  const UP_CONFIG = {
    threshold: -80 * DEVICE_RATIO,
  }

  export default {
    inject: ['reload'],
    data() {
      return {
        rule: false,
        userSign: "",
        mechanismId: "",
        attendList: [],
        check: "",
        empty: true,
        showAttend: 0,
        sendVal: false,
        id: "",
        attendScroll: null,
        currentPage: 1,
        PageSize: 20,
        noMoreData: false,
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
      this.mechanismId = this.$route.query.mechanismId;
      this.queryAttendList();
    },
    methods: {
      searchAttend() {//根据条件查找
        this.currentPage = 1;
        this.PageSize = 20;
        this.queryAttendList(() => {
          //初始化Dom
          this.$nextTick(() => {
            this.attendScroll = null;
            this.noMoreData = false;
            this.initScroll();
          });
        });
      },
      queryAttendList() {//查询考勤签到列表
        this.$vux.loading.show({
          text: '加载中',
        });
        this.axios.get(baseUrl + "/work_money/get_user_sign_list?sgin=" + this.userSign + "&mechanismId=" + this.mechanismId + "&check=" + this.check + "&page=" + this.currentPage + "&size=" + this.PageSize).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            if (resultObj.data.length > 0 && resultObj.data != null) {
              this.showAttend = 1;
              this.attendList = resultObj.data;
              //DOM还没有更新
              this.$nextTick(() => {
                this.initScroll();
                this.attendScroll.on('touchEnd', (pos) => {
                  if (Math.abs(Math.round(pos.y)) > Math.abs(Math.round(this.attendScroll.maxScrollY + 1))) {
                    this.loadMore();
                  }
                });
              });
            } else {//没有签到数据
              this.showAttend = 2;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      attendance(id) {//考勤签到
        this.$vux.loading.show({
          text: '加载中',
        });
        this.axios.get(baseUrl + "/work_money/set_user_sign?sgin=" + this.userSign + "&mechanismId=" + this.mechanismId + "&mechanismUserIn=" + id + "&status=" + 1).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            if (resultObj.data == 0) {//签到考勤失败
              this.reload();
              this.$vux.toast.text("签到考勤失败,请重试", "middle");
            } else {
              this.reload();
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      openModal(id) {//提示语句
        this.id = id;
        this.sendVal = true;
      },
      openNote() {
        this.rule = true;
      },
      close() {
        this.rule = false;
      },
      updateAttend() {//修改考勤
        this.sendVal = false;
        this.$vux.loading.show({
          text: '加载中',
        });
        this.axios.get(baseUrl + "/work_money/set_user_sign?sgin=" + this.userSign + "&mechanismId=" + this.mechanismId + "&mechanismUserIn=" + this.id + "&status=" + 2).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            if (resultObj.data == 0) {//签到考勤失败
              this.$vux.toast.text("修改考勤失败,请重试", "middle");
            } else {
              this.reload();
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      cancel() {//否
        this.sendVal = false;
      },
      loadMore() {//加载更多
        if (!this.noMoreData) {
          this.$vux.loading.show({
            text: '加载中',
          });
          setTimeout(() => {
            this.axios.get(baseUrl + "/work_money/get_user_sign_list?sgin=" + this.userSign + "&mechanismId=" + this.mechanismId + "&check=" + this.check + "&page=" + (++this.currentPage) + "&size=" + this.PageSize).then((res) => {
              let resultObj = res.data;
              if (resultObj.code == 0) {
                if (resultObj.data.length > 0) {
                  this.attendList = this.attendList.concat(resultObj.data);
                } else {
                  this.noMoreData = true;
                }
                this.$vux.loading.hide();
              } else {
                this.$vux.loading.hide();
                this.$vux.toast.text(resultObj.msg, "middle");
              }
            })
          }, 500)
        }
      },
      initScroll() {//初始化BScroll
        if (!this.attendScroll) {
          this.attendScroll = new BScroll(this.$refs.wrapper, {
            probeType: 3,
            deceleration: 0.003,
            bounce: false,
            swipeTime: 2000,
            click: true,
            pullUpLoad: UP_CONFIG
          });
        } else {
          this.attendScroll.refresh();
        }
      },
      enable() {
        this.attendScroll && this.attendScroll.enable()
      },
      refresh() {
        this.attendScroll && this.attendScroll.refresh()
      },
      finishPullUp() {
        this.attendScroll && this.attendScroll.finishPullUp()
      },
      inputBlur() {
        window.scrollTo(0, 0)
      },
    },
    watch: {
      attendList() {
        this.$nextTick(() => {
          this.attendScroll.refresh();
        })
      }
    },
    components: {
      "v-dialog": dialog,
      BScroll
    }
  }
</script>

<style lang="stylus" scoped>
  .attend-wrap
    width: 100%
    height: auto
    .search-box
      position: fixed
      top: 0
      z-index: 1
      display: flex
      align-items: center
      width: 100%
      height: 1.333333rem
      border-bottom: 0.013rem solid rgba(230, 230, 230, 1)
      .note
        display: flex
        align-items: center
        text-align: center
        margin-left: 0.373333rem
        margin-right: 0.28rem
        width: 0.986666rem
        height: 0.946666rem
        border: 0.013rem solid rgba(60, 175, 255, 1)
        border-radius: 0.08rem
        font-size: 0.333333rem
        font-weight: 500
        color: rgba(60, 175, 255, 1)
      .search-con
        position: relative
        display: flex
        align-items: center
        width: 69.86666%
        height: 0.946666rem
        background: rgba(255, 255, 255, 1)
        border: 0.013rem solid rgba(126, 126, 126, 1)
        border-radius: 0.466666rem
        .content
          display: flex
          align-items: center
          height: 0.6rem
          line-height: 0.6rem
          margin-left: 0.733333rem
          font-size: 0.386666rem
          color: rgba(187, 187, 187, 1)
          border: none
          outline: none
        .icon
          position: absolute
          width: 0.373333rem
          height: 0.373333rem
          left: 0.24rem
          top: 0
          bottom: 0
          margin: auto
      .title
        margin-left: auto;
        margin-right: 0.346666rem;
        font-size: 0.386666rem;
        font-weight: 500;
        color: rgba(68, 68, 68, 1);

    .attend-con
      position: fixed;
      top: 1.333333rem;
      bottom: 0;
      width: 100%;
      overflow: hidden;
      .attend-list
        .attend-box
          display: flex
          justify-content: center
          flex-direction: column
          width: 100%
          height: auto
          .attend-content
            display: flex
            align-items: center
            margin-left: 0.426666rem
            margin-bottom: 0.2rem
            margin-top: 0.2rem
            .name
              font-size: 0.386666rem
              color: rgba(68, 68, 68, 1)
            .number
              padding-left: 0.4rem
              font-size: 0.386666rem
              color: rgba(68, 68, 68, 1)
            .status
              margin-right: 0.293333rem
              margin-left: auto
              color: rgba(255, 96, 96, 1)
            .sign-btn
              display: flex
              margin-left: auto
            .pass
              margin-left: auto
              margin-right: 0.293333rem
              width: 1.84rem
              height: 0.693333rem
              line-height: 0.693333rem
              background: rgba(60, 175, 255, 1)
              border-radius: 0.346666rem
              font-size: 0.346666rem
              color: rgba(255, 255, 255, 1)
              border: 0.013rem solid rgba(60, 175, 255, 1)
            .off
              margin-left: auto
              margin-right: 0.293333rem
              width: 1.84rem
              height: 0.693333rem
              line-height: 0.693333rem
              border-radius: 0.346666rem
              font-size: 0.346666rem
              color: rgba(60, 175, 255, 1)
              border: 0.027rem solid rgba(60, 175, 255, 1)
              background: #FFF
            .refuse
              margin-left: auto
              margin-right: 0.293333rem
              width: 1.84rem
              height: 0.693333rem
              line-height: 0.693333rem
              border: 0.013rem solid rgba(60, 175, 255, 1)
              border-radius: 0.346666rem
              font-size: 0.386666rem
              color: rgba(60, 175, 255, 1)
              background: rgba(255, 255, 255, 1)
        .line-box
          width: 100%
          height: 0.133333rem
          background: #F2F2F2
    .empty-wrap
      display: flex
      align-items: center
      justify-content: center
      width: 100%
      height: auto
      position: fixed
      top: 1.333333rem
      left: 0
      right: 0
      bottom: 0
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)
    .modal-box
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 100
      background-color: rgba(0, 0, 0, 0.5)
      .modal-con
        position: absolute
        width: 100%
        height: 9.186666rem
        bottom: 0
        background: #FFF
        .title-box
          display: flex
          align-items: center
          width: 100%
          height: 1.333333rem
          border-bottom: 0.013rem solid rgba(204, 204, 204, 1)
          .title
            display: flex
            justify-content: center
            width: 100%
            font-size: 0.44rem
            font-weight: 500
            color: rgba(27, 27, 27, 1)
          .del-icon
            position: absolute;
            width: 0.386666rem;
            height: 0.386666rem;
            right: 0.373333rem;

        .rule-box
          width: 92.53%
          height: auto
          margin: 0 auto
          margin-top: 0.373333rem
          font-size: 0.413333rem
          color: rgba(68, 68, 68, 1)
          line-height: 0.626666rem
          margin-bottom: 0.8rem
</style>
